<template>
	<view class="popup-container" @click.stop>
		<view class="popup-body">
			<swiper class="swiper" circular current="{{currentItem}}" @change="handleSwiperChange">
				<template v-if="slides.length > 0">
					<swiper-item class="swiper-item" v-for="(item, index) in slides" :key="index">
						<view class="popup-bg" :style="{ backgroundImage: `url(${item.image})` }">
							<view class="info-text-box">
								当前 <text style="color: #FF6A00;">{{bottleCount}} </text> 人正在拼桌
							</view>
							<view class="msy-bg">

							</view>
							<image class="title-bg" src="https://oss.jtmckj.com/drifbottle/title-bg.png"></image>
							<view class="zt-continar">
								<view class="zt-flex-box">
									<view class="zt-name">没桌</view>
									<view class="yq-jr">求拼</view>
								</view>
								<view class="time">{{dayjs(item.joinTime).format('YYYY-MM-DD HH:mm:ss')}}</view>
							</view>

							<view class="logo-continar">
								<view class="logo-flex-bewtten">
									<view class="logo-flex-left">
										<!-- 微信用户头像 -->
										<image class="por-img" v-if="item.logo" :src="item.logo" mode=""></image>
										<view style="flex: 1; margin-left: 12rpx;">
											<view class="title">{{ item.memberName }}</view>
											<view style="display: flex;">
												<view class="age">
													<image v-if="item.sex == '男'"
														src="https://oss.jtmckj.com/drifbottle/age-icon.png" mode="">
													</image>
													<image v-if="item.sex == '女'"
														src="https://oss.jtmckj.com/drifbottle/age-icon-n.png" mode="">
													</image>
													<view class="value">{{ item.age }}</view>
												</view>
											</view>

										</view>
									</view>

									<view class="logo-flex-rg">
										<image src="https://oss.jtmckj.com/drifbottle/xx1.png" mode=""></image>
									</view>
								</view>
								<view class="pro-info .text-container">{{ item.msg }}</view>
							</view>

							<view class="footer-continarsx">
								<view class="left-continar" @click="debouncedReject(item,index)">
									<image src="https://oss.jtmckj.com/drifbottle/icon-mxq.png" mode=""></image>
									<view class="title">没兴趣</view>
								</view>
								<view class="rg-continar" @click="debouncedCancel(item,index)">
									<view class="ax-continar" style="">
										<image src="https://oss.jtmckj.com/drifbottle/ax-icon.png" mode=""></image>
										<view class="text">
											约TA
										</view>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>

				</template>
				<template v-else>
					<swiper-item class="swiper-item" v-for="(item, index) in deutslides" :key="index">
						<view class="popup-bg" :style="{ backgroundImage: `url(${item.image})` }">
						</view>
					</swiper-item>
				</template>
			</swiper>
			<!-- 	<view class="page-indicator" v-if="slides.length > 1">
				<text style="color: #FFAA00;">{{currentIndex + 1}}</text>/{{slides.length}} 左右滑动
			</view> -->
		</view>
	</view>


</template>

<script setup>
	import { http } from '@/api/pzApi/http/api.js';
	import {ref,defineEmits,defineProps} from 'vue';
    import dayjs from 'dayjs';

	
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ''
		},
		bottleCount: Number,
		slides: {
			type: Array,
			default: () => []
		},
		deutslides: {
			type: Array,
			default: () => []
		}
	});

	const globalData = uni.getStorageSync('userInfo')
	const msgContent = uni.getStorageSync('beatInfo')

	const emit = defineEmits(['update:visible', 'confirm', 'cancel', 'remove-item']);

	const closePopup = () => {
		emit('update:visible', false);
	};

	const handleOverlayClick = () => {
		closePopup();
	};

	//拒绝
	const confirm = async (v, index) => {
		console.log(v, '没心趣')
		let params = {
			"functionName": "bottleReadRefuse",
			"orgCode": globalData.orgCode,
			"contentData": {
				"bottleCode": v.bottleCode,
				"memberCode": globalData.userCode,
				"memberName": globalData.name,
				"otherMemberCode": v.memberCode,
				"otherMemberName": v.memberName,
			}
		}

		try {
			const res = await http.post('/AppMemberMallProcess', params);
			console.log(res, '拒绝了--------------')
			uni.$u.toast("不感兴趣")
			props.slides.splice(index, 1);
			console.log(res, '浏览响应数据-----------------')

		} catch (error) {
			console.error('Error:', error);
		}
	};

     // 定义数据和方法
    const item = ref(null); // 你的数据
    const index = ref(0); // 你的索引
	
  // 自定义防抖函数
	const debounce = (func, wait) => {
	  let timeout;
	  return function (...args) {
		const context = this;
		clearTimeout(timeout);
		timeout = setTimeout(() => func.apply(context, args), wait);
	  };
	};



	//同意操作
	const cancel = async (v, index) => {
		console.log(v, '约她')
		uni.setStorageSync('lqListData', v)
		emit('cancel',index);
	};
	
    const debouncedCancel = debounce(cancel, 300); // 300 毫秒防抖
    const debouncedReject = debounce(confirm, 300); // 300 毫秒防抖

	
	const currentIndex = ref(0);

   //滑动卡片浏览
	const handleSwiperChange = async (e) => {
		currentIndex.value = e.detail.current;
	    if(props.slides.length > 0) {
			  const currentSlide = props.slides[currentIndex.value];
			  console.log(currentSlide.bottleCode,'currentIndex.value')
			  
			  //标记瓶子已读
			  let params = {
			  	"functionName": "bottleRead",
			  	"orgCode": globalData.orgCode,
			  	"contentData": {
			  		"bottleCode": currentSlide.bottleCode ? currentSlide.bottleCode : '',
			  		"memberCode": globalData.userCode,
			  		"memberName": globalData.name,
			  		"otherMemberCode": currentSlide.memberCode,
			  		"otherMemberName": currentSlide.memberName,
			  	}
			  }
			  console.log(params, '发送拒绝参数--------------')
			  try {
			  	const res = await http.post('/AppMemberMallProcess', params);
			  
			  	console.log(res, '浏览响应数据-----------------')
			  
			  } catch (error) {
			  	console.error('Error:', error);
			  }
			  
			  console.log('当前卡片信息:', currentSlide); // 这里可以进行任何需要的操作
		}

	}
</script>

<style scoped lang="scss">
	.popup-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-wrap: wrap;
		flex-direction: column;
		align-items: center;
	}

	.popup-container {
		position: relative;
		max-width: 100%;
		height: 930rpx;
		display: flex;
		flex-direction: column;
		background: linear-gradient(0deg, #E9A5A5 0%, #B8C1C0 25%, #65C0E0 50%, #AEA2DB 75%, #81C1D9 100%);
		border-radius: 30rpx;
		border-image: linear-gradient(0deg, #E9A5A5, #B8C1C0, #65C0E0, #AEA2DB, #81C1D9) 10 10;
	}

	.popup-header {
		padding: 10px;
		border-bottom: 1px solid #ddd;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.popup-title {
		font-size: 18px;
		font-weight: bold;
	}



	.popup-body {
		padding: 10rpx;
		flex: 1;

		.swiper {
			height: 100%;
		}
	}

	.popup-bg {
		border-radius: 10px;
		position: relative;
		height: 100%;
		background-size: cover;

		.info-text-box {
			width: 300rpx;
			height: 48rpx;
			background: #000000;
			border-radius: 0rpx 16rpx 0rpx 24rpx;
			position: absolute;
			top: 0;
			right: 0;
			text-align: center;
			line-height: 48rpx;
			color: #fff;
			font-size: 24rpx;
			z-index: 999;
		}

		.msy-bg {
			border-radius: 10px;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-image: url('https://oss.jtmckj.com/drifbottle/msy-bg.png');
			background-size: cover;
			background-position: center;
			background-color: rgba(0, 0, 0, 0.5);
			pointer-events: none;
		}

		.title-bg {
			margin-left: 16rpx;
			margin-top: 289rpx;
			width: 244rpx;
			height: 79rpx;
		}

		.zt-continar {
			position: relative;
			padding: 14rpx 0 14rpx 24rpx;
			margin-top: 24rpx;
			width: 360rpx;
			background: #000000;
			border-radius: 0rpx 16rpx 16rpx 0rpx;
			background-color: rgba(0, 0, 0, 0.5);

			.zt-flex-box {
				display: flex;
				align-items: center;

				.zt-name {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFD400;
					margin-right: 16rpx;
				}

				.yq-jr {
					font-weight: 500;
					font-size: 28rpx;
					color: #FF6A00;
				}
			}

			.time {
				margin-top: 8rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
	}

	.popup-footer {
		padding: 10px;
		border-top: 1px solid #ddd;
		display: flex;
		justify-content: flex-end;
	}

	.popup-button {
		margin-left: 10px;
		padding: 5px 10px;
	}

	.popup-close {
		position: relative;
		display: flex;
		justify-content: center;
		transform: translateY(50rpx);
		bottom: 0;
		width: 60rpx;
		height: 60rpx;
	}

	.logo-continar {
		position: absolute;
		margin-top: 32rpx;
		padding-left: 20rpx;
		bottom: 175rpx;

		.logo-flex-bewtten {
			display: flex;
			justify-content: space-between;

			.logo-flex-left {
				display: flex;

				image {
					// border-radius: 50%;
					width: 80rpx;
					height: 80rpx;
				}

				.title {
					font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
				}

				.age {
					display: flex;
					align-items: center;
					justify-content: center;
					margin-top: 10rpx;
					padding: 0 15rpx;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 20rpx;
					border: 1px solid #FFFFFF;

					image {
						width: 22rpx;
						height: 22rpx;
					}

					.value {
						margin-left: 7rpx;
						font-weight: 500;
						font-size: 28rpx;
						color: #FFFFFF;
					}
				}
			}

			.logo-flex-rg {
				padding-right: 30rpx;
				position: relative;
				left: 220rpx;
				top: 44rpx;

				image {
					width: 105rpx;
					height: 71rpx;
				}

			}
		}
	}

	.pro-info {
		margin-top: 30rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.footer-continarsx {
		position: absolute;
		width: 100%;
		bottom: 0;
		display: flex;
		background: #212121;
		// border-radius: 10rpx;
		border-radius: 33rpx;

		.left-continar {

			padding-left: 16rpx;
			width: 270rpx;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			align-items: center;

			image {
				width: 28rpx;
				height: 65rpx;
			}

			.title {
				margin-left: 50rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #F24479;
			}
		}

		.rg-continar {
			text-align: center;
			position: absolute;
			right: -1rpx;
			width: 340rpx;
			height: 101rpx;
			line-height: 100rpx;
			background: url("https://oss.jtmckj.com/drifbottle/icon-btn.png")no-repeat;
			background-size: 100% 100%;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			border-radius: 0px 0 21rpx 0;

			.ax-continar {
				padding-left: 120rpx;
				display: flex;
				align-items: center;

				image {
					width: 40rpx;
					height: 34rpx;
					margin-right: 20rpx;

					.text {
						font-weight: bold;
						font-size: 32rpx;
						color: #FFFFFF;
					}
				}
			}
		}
	}

	.page-indicator {
		position: absolute;
		top: 20rpx;
		left: 20rpx;
		font-weight: 400;
		font-size: 24rpx;
		color: #fff;
		width: 180rpx;
		height: 40rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text-container {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		/* 显示的最大行数 */
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>